<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="codeigniter tutorial,codeigniter,anggy trisnawan putra,sharing script,jquery,ajax,php" />
<meta name="description" content="Blog berisi tutorial Codeigniter, pengembangan aplikasi berbasis web, sharing script, dan lainnya" />
<title>Ajax File Upload (CodeIgniter dan JQuery) | blog.putraweb.net</title>
<link href="http://blog.putraweb.net/wp-content/themes/boldy/style.css" rel="stylesheet" type="text/css" />
<link href="http://blog.putraweb.net/wp-content/themes/boldy/css/ddsmoothmenu.css" rel="stylesheet" type="text/css" />
<link href="http://blog.putraweb.net/wp-content/themes/boldy/css/prettyPhoto.css" rel="stylesheet" type="text/css" />
<link href="http://blog.putraweb.net/wp-content/themes/boldy/css/nivo-slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://blog.putraweb.net/wp-content/themes/boldy/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://blog.putraweb.net/wp-content/themes/boldy/js/jquery.form.js"></script>
<script type="text/javascript" src="http://blog.putraweb.net/wp-content/themes/boldy/js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="http://blog.putraweb.net/wp-content/themes/boldy/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="http://blog.putraweb.net/wp-content/themes/boldy/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="http://blog.putraweb.net/wp-content/themes/boldy/js/custom.js"></script>
<script type="text/javascript" src="http://blog.putraweb.net/wp-content/themes/boldy/js/cufon-yui.js"></script>
<script type="text/javascript" src="http://blog.putraweb.net/wp-content/themes/boldy/js/Museo_Slab_500_400.font.js"></script>
<!-- Cufon init -->
	<script type="text/javascript">
					Cufon.replace('h1',{hover: true})('h2',{hover: true})('h3')('.reply',{hover:true})('.more-link');
		 	</script>
	<script type="text/javascript">
		 $(document).ready(function(){
			  $('#quickContactForm').ajaxForm(function(data) {
				 if (data==1){
					 $('#success').fadeIn("slow");
					 $('#bademail').fadeOut("slow");
					 $('#badserver').fadeOut("slow");
					 $('#contact').resetForm();
					 }
				 else if (data==2){
						 $('#badserver').fadeIn("slow");
					  }
				 else if (data==3)
					{
					 $('#bademail').fadeIn("slow");
					}
					});
				 });
		</script>
<link rel="pingback" href="http://blog.putraweb.net/xmlrpc.php" />
		<link rel='archives' title='January 2011' href='http://blog.putraweb.net/2011/01/' />
	<link rel='archives' title='October 2010' href='http://blog.putraweb.net/2010/10/' />
	<link rel='archives' title='March 2010' href='http://blog.putraweb.net/2010/03/' />
	<link rel='archives' title='November 2009' href='http://blog.putraweb.net/2009/11/' />
	<link rel='archives' title='October 2009' href='http://blog.putraweb.net/2009/10/' />
	<link rel='archives' title='September 2009' href='http://blog.putraweb.net/2009/09/' />
		<link rel="alternate" type="application/rss+xml" title="blog.putraweb.net &raquo; Ajax File Upload (CodeIgniter dan JQuery) Comments Feed" href="http://blog.putraweb.net/2009/09/27/ajax-file-upload-codeigniter-dan-jquery/feed/" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://blog.putraweb.net/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://blog.putraweb.net/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='blog.putraweb.net' href='http://blog.putraweb.net/' />
<link rel='start' title='CPNS Unnes 2009' href='http://blog.putraweb.net/2009/09/16/cpns-unnes-2009/' />
<link rel='prev' title='Fungsi Javascript Sederhana untuk Mengakses Jquery di CI' href='http://blog.putraweb.net/2009/09/27/fungsi-javascript-sederhana-untuk-mengakses-jquery-di-ci/' />
<link rel='next' title='Menampilkan Gambar dari Database di CodeIgniter' href='http://blog.putraweb.net/2009/09/29/menampilkan-gambar-dari-database-di-codeigniter/' />
<meta name="generator" content="WordPress 3.0.4" />
<link rel='shortlink' href='http://blog.putraweb.net/?p=68' />

<!-- All in One SEO Pack 1.6.13 by Michael Torbert of Semper Fi Web Design[556,631] -->
<meta name="description" content="Setelah sekian lama pending, alhamdulillah saya ada waktu sedikit untuk menulis artikel sederhana ini. Kebetulan kemarin saya chatting dengan teman dan dia" />
<meta name="keywords" content="ajax,jquery,tutorial codeigniter,codeigniter" />
<link rel="canonical" href="http://blog.putraweb.net/2009/09/27/ajax-file-upload-codeigniter-dan-jquery/" />
<!-- /all in one seo pack -->

		<style type="text/css" media="screen">
		pre span.ln{width:3.1em;margin-right:4px;line-height:18px;float:left;color:#000!important;}pre{font-family: Monaco,\"Lucida Console\", monospace;
background: url(http://blog.putraweb.net/wp-content/plugins/fv-code-highlighter/images/notepaper.png) top left repeat;
display: block;
font-size: 13px;
color: #000;
padding: 18px 10px 17px 10px;
line-height: 18px;
border: 1px solid #e2e2e2;
text-align: left;
overflow: auto;
white-space: pre;}.css{}.cssImport{color: #099;
font-weight: bold;}.cssMedia{color: #900;
font-weight: bold;}.cssComment, .cssComment span{color: #999 !important;
font-weight: normal !important;}.cssImportant{color: #f00;
font-weight: bold;}.cssProperty{color: #009;}.cssSelector{color: #f0f;}.cssString{color: #060;
font-weight: normal !important;}.cssValue{color: #00f;}.cssRest{color: #f0f;
font-weight: bold;}.html{}.htmlAnchorTag{color: #060;}.htmlAttributeValue{color: #00f}.htmlComment, .htmlComment span{color: #999 !important;
font-weight: normal !important}.htmlFormTag{color: #f90;}.htmlImageTag{color: #909;}.htmlObjectTag{color: #900;}.htmlOtherTag{color: #009;}.htmlScriptTag{color: #900;}.htmlSpecialChar{color: #000;
font-weight: bold;}.htmlStyleTag{color: #909;}.htmlTableTag{color: #099;}.htmlText{color: #000}.xml{}.xmlString{color: #060;}.xmlComment, .xmlComment span{color: #999;}.xmlNumber{color: #f00;}.xmlTag{color: #009}.xmlText{color: #000}.php{color: #000;}.phpScriptTag, .phpScriptTag span{color: #f00;
font-weight: bold;}.phpComment, .phpComment span, .phpComment span span{color: #f90 !important;
font-weight: normal !important;}.phpConstant{color: #520;}.phpText{color: #000;}.phpFunction{color: #00f;}.phpFunction a{color: #00f;}.phpFunction a:hover{color: #00f;}.phpFunctionKeyword{color: #00f;}.phpIdentifier{color: #000;}.phpNumber{color: #f00;}.phpOperator{color: #00f;}.phpKeyword{color: #006600;}.phpString, .phpString span{color: #c00 !important;}.phpVarType{color: #099;}.phpScriptVar{color: #06f;}
		</style>
		<meta name="Code-Generator" content="FV Code Highlighter" />
			<script type="text/javascript"
		src="http://blog.putraweb.net/wp-content/plugins/luxboy-smiley/smiley.php">
	</script>
	<script charset="utf-8" type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'wp.0cd83da3-987f-4a40-9dc1-7a7f22f1303e'});var st_type='wordpress2.8.4';</script><!-- WP Favicon -->
<link rel="shortcut icon" href="http://blog.putraweb.net/favicon.ico" type="image/x-icon" />
<link rel="icon"          href="http://blog.putraweb.net/favicon.gif" type="image/gif"    />
<!-- /WP Favicon -->
	<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>

<body >
<!-- BEGINN MAINWRAPPER -->
<div id="mainWrapper">
	<!-- BEGIN WRAPPER -->
    <div id="wrapper">
		<!-- BEGIN HEADER -->
        <div id="header">
            <div id="logo"><a href="http://blog.putraweb.net/"><img src="http://blog.putraweb.net/wp-content/uploads/2011/02/logo1.png" alt="blog.putraweb.net" /></a></div>
			<!-- BEGIN MAIN MENU -->
			<div id="mainMenu" class="ddsmoothmenu"><ul id="menu-topmenu" class="menu"><li id="menu-item-191" class="menu-item menu-item-type-custom menu-item-home menu-item-191"><a href="http://blog.putraweb.net">Home</a></li>
<li id="menu-item-223" class="menu-item menu-item-type-post_type menu-item-223"><a href="http://blog.putraweb.net/archives/">Archives</a></li>
<li id="menu-item-188" class="menu-item menu-item-type-post_type menu-item-188"><a href="http://blog.putraweb.net/about/">About</a></li>
<li id="menu-item-196" class="menu-item menu-item-type-taxonomy current-post-ancestor menu-item-196"><a href="http://blog.putraweb.net/category/blog/">Blog</a>
<ul class="sub-menu">
	<li id="menu-item-195" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-195"><a href="http://blog.putraweb.net/category/blog/codeigniter/">CodeIgniter</a></li>
	<li id="menu-item-197" class="menu-item menu-item-type-taxonomy menu-item-197"><a href="http://blog.putraweb.net/category/blog/php/">PHP</a></li>
	<li id="menu-item-198" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-198"><a href="http://blog.putraweb.net/category/blog/ajax/">Ajax</a></li>
	<li id="menu-item-199" class="menu-item menu-item-type-taxonomy menu-item-199"><a href="http://blog.putraweb.net/category/blog/jquery/">JQuery</a></li>
	<li id="menu-item-200" class="menu-item menu-item-type-taxonomy menu-item-200"><a href="http://blog.putraweb.net/category/blog/mysql/">mySQL</a></li>
</ul>
</li>
<li id="menu-item-190" class="menu-item menu-item-type-taxonomy menu-item-190"><a href="http://blog.putraweb.net/category/blog/produk/">Produk</a></li>
<li id="menu-item-192" class="menu-item menu-item-type-custom menu-item-192"><a href="http://mynotes.putraweb.net">Daily Notes</a></li>
</ul></div>            <!-- END MAIN MENU -->
			<!-- BEGIN TOP SEARCH -->
			<div id="topSearch">
				<form id="searchform" action="http://blog.putraweb.net/" method="get">
					<input type="submit" value="" id="searchsubmit"/>
					<input type="text" id="s" name="s" value="type your search" />
				</form>
			</div>
			<!-- END TOP SEARCH -->
			<!-- BEGIN TOP SOCIAL LINKS -->
			<div id="topSocial">
				<ul>
																				<li><a href="http://www.facebook.com/anggy.trisnawan" class="twitter" title="Join Us on Facebook!"><img src="http://blog.putraweb.net/wp-content/themes/boldy/images/ico_facebook.png" alt="Join Us on Facebook!" /></a></li>
										<li><a href="http://blog.putraweb.net/feed/" title="RSS" class="rss"><img src="http://blog.putraweb.net/wp-content/themes/boldy/images/ico_rss.png" alt="Subcribe to Our RSS Feed" /></a></li>
				</ul>
			</div>	
			<!-- END TOP SOCIAL LINKS -->
        </div>
        <!-- END HEADER -->
		
		<!-- BEGIN CONTENT -->
		<div id="content">
<!-- Begin #colLeft -->
		<div id="colLeft">
				<div class="postItem">
				<h1><a href="http://blog.putraweb.net/2009/09/27/ajax-file-upload-codeigniter-dan-jquery/">Ajax File Upload (CodeIgniter dan JQuery)</a></h1> 
				<div class="meta">
							Sep 27, 2009 &nbsp;&nbsp;//&nbsp;&nbsp; by <span class="author"><a href="http://putraweb.net" title="Visit anggie&#8217;s website" rel="external">anggie</a></span> &nbsp;&nbsp;//&nbsp;&nbsp;  <a href="http://blog.putraweb.net/category/blog/ajax/" title="View all posts in Ajax" rel="category tag">Ajax</a>, <a href="http://blog.putraweb.net/category/blog/codeigniter/" title="View all posts in CodeIgniter" rel="category tag">CodeIgniter</a>  &nbsp;//&nbsp;  <a href="http://blog.putraweb.net/2009/09/27/ajax-file-upload-codeigniter-dan-jquery/#comments" title="Comment on Ajax File Upload (CodeIgniter dan JQuery)">41 Comments</a> 
						</div>
				<p>Setelah sekian lama pending, alhamdulillah saya ada waktu sedikit untuk menulis artikel sederhana ini. Kebetulan kemarin saya chatting dengan teman dan dia memberikan ide untuk menulis artikel tentang upload file dengan <a title="Ajax" href="http://blog.putraweb.net/category/blog/ajax/">Ajax</a>. Walaupun sebenarnya saya juga bingung, tetapi akhirnya saya berhasil membuatnya, &#8211;memodifikasi, :D &#8212; berawal dari sebuah artikel di <a href="http://www.phpletter.com/Our-Projects/AjaxFileUpload/">sini</a>.<span id="more-68"></span><br />
Langsung saja saya berikan langkah-langkah dan penjelasan semampu saya.<br />
Sebenarnya, pembuatan controller dan view untuk &#8220;halaman upload&#8221; ini tidaklah berbeda jauh dengan panduan di user guide <a title="CodeIgniter" href="http://blog.putraweb.net/category/blog/codeigniter/">CodeIgniter</a>. Penambahan yang diberikan adalah pada proses uploadnya. Kita tambahkan fungsi javascript yang akan dieksekusi ketika button upload ditekan. <br />
Kita buat form upload (upload_form.php) terlebih dahulu.</p>
<pre class="html">
if ( ! defined(&#039;BASEPATH&#039;)) exit(&#039;No direct script access allowed&#039;);?&gt;
<span class="htmlOtherTag">&lt;html&gt;</span>
	<span class="htmlOtherTag">&lt;head&gt;</span>
		<span class="htmlOtherTag">&lt;title&gt;</span><a title="JQuery" href="http://blog.putraweb.net/category/blog/jquery/">JQuery</a> - CodeIgniter File Upload Demo<span class="htmlOtherTag">&lt;/title&gt;</span>
	<span class="htmlOtherTag">&lt;link href=<span class="htmlAttributeValue">&quot;&lt;?php echo base_url()?&gt;</span>asset/style/ajaxfileupload.css&quot;</span> type=<span class="htmlAttributeValue">&quot;text/css&quot;</span> rel=<span class="htmlAttributeValue">&quot;stylesheet&quot;</span>&gt;
	<span class="htmlScriptTag">&lt;script type=<span class="htmlAttributeValue">&quot;text/javascript&quot;</span> src=<span class="htmlAttributeValue">&quot;<span class="htmlOtherTag">&lt;?php echo base_url()?&gt;</span></span>asset/js/jquery.js&quot;</span>&gt;<span class="htmlScriptTag">&lt;/script&gt;</span>
	<span class="htmlScriptTag">&lt;script type=<span class="htmlAttributeValue">&quot;text/javascript&quot;</span> src=<span class="htmlAttributeValue">&quot;<span class="htmlOtherTag">&lt;?php echo base_url()?&gt;</span></span>asset/js/ajaxfileupload.js&quot;</span>&gt;<span class="htmlScriptTag">&lt;/script&gt;</span>
	<span class="htmlScriptTag">&lt;script type=<span class="htmlAttributeValue">&quot;text/javascript&quot;</span>&gt;</span>
	function ajaxFileUpload()
	{
		$(&quot;#loading&quot;)
		.ajaxStart(function(){
			$(this).show();
		})
		.ajaxComplete(function(){
			$(this).hide();
		});
		$.ajaxFileUpload
		(
			{
				url:&#039;<span class="htmlOtherTag">&lt;?php echo site_url()?&gt;</span>/upload/do_upload&#039;,
				secureuri:false,
				fileElementId:&#039;fileToUpload&#039;,
				dataType: &#039;json&#039;,
				success: function (data, status)
				{
					if(typeof(data.error) != &#039;undefined&#039;)
					{
						if(data.error != &#039;&#039;)
						{
							$(&quot;#info&quot;).html(data.error);
						}else
						{
							$(&quot;#info&quot;).html(data.msg);
						}
					}
				},
				error: function (data, status, e)
				{
					$(&quot;#info&quot;).html(e);
				}
			}
		)
		return false;
	}
	<span class="htmlScriptTag">&lt;/script&gt;</span>
	<span class="htmlOtherTag">&lt;/head&gt;</span>
	<span class="htmlOtherTag">&lt;body&gt;</span>
<span class="htmlOtherTag">&lt;div id=<span class="htmlAttributeValue">&quot;wrapper&quot;</span>&gt;</span>
    <span class="htmlOtherTag">&lt;div id=<span class="htmlAttributeValue">&quot;content&quot;</span>&gt;</span>
    	<span class="htmlOtherTag">&lt;h1&gt;</span>JQuery - CodeIgniter File Upload Demo<span class="htmlOtherTag">&lt;/h1&gt;</span>
    	<span class="htmlOtherTag">&lt;p&gt;</span>Upload file using CodeIgniter File Uploading Class and JQuery<span class="htmlOtherTag">&lt;/p&gt;</span>
				<span class="htmlOtherTag">&lt;p&gt;</span>
				Need any Web-based Information System?<span class="htmlOtherTag">&lt;br&gt;</span> Please <span class="htmlAnchorTag">&lt;a href=<span class="htmlAttributeValue">&quot;http://www.putraweb.net/about&quot;</span>&gt;</span>Contact Us<span class="htmlAnchorTag">&lt;/a&gt;</span><span class="htmlOtherTag">&lt;br&gt;</span>  	
		<span class="htmlFormTag">&lt;form name=<span class="htmlAttributeValue">&quot;form&quot;</span> action=<span class="htmlAttributeValue">&quot;&quot;</span> method=<span class="htmlAttributeValue">&quot;POST&quot;</span> enctype=<span class="htmlAttributeValue">&quot;multipart/form-data&quot;</span>&gt;</span>
		<span class="htmlTableTag">&lt;table cellpadding=<span class="htmlAttributeValue">&quot;0&quot;</span> cellspacing=<span class="htmlAttributeValue">&quot;0&quot;</span> class=<span class="htmlAttributeValue">&quot;tableForm&quot;</span>&gt;</span>
		<span class="htmlTableTag"><span class="htmlTableTag">&lt;thead&gt;</span></span>
			<span class="htmlTableTag">&lt;tr&gt;</span>
				<span class="htmlTableTag">&lt;th&gt;</span>Please select a file and click Upload button<span class="htmlTableTag">&lt;/th&gt;</span>
			<span class="htmlTableTag">&lt;/tr&gt;</span>
		<span class="htmlTableTag"><span class="htmlTableTag">&lt;/thead&gt;</span></span>
		<span class="htmlTableTag">&lt;tbody&gt;</span>
			<span class="htmlTableTag">&lt;tr&gt;</span>
				<span class="htmlTableTag">&lt;td&gt;</span><span class="htmlFormTag">&lt;input id=<span class="htmlAttributeValue">&quot;fileToUpload&quot;</span> type=<span class="htmlAttributeValue">&quot;file&quot;</span> size=<span class="htmlAttributeValue">&quot;45&quot;</span> name=<span class="htmlAttributeValue">&quot;fileToUpload&quot;</span> class=<span class="htmlAttributeValue">&quot;input&quot;</span>&gt;</span><span class="htmlTableTag">&lt;/td&gt;</span>			<span class="htmlTableTag">&lt;/tr&gt;</span>
		<span class="htmlTableTag">&lt;/tbody&gt;</span>
			<span class="htmlTableTag">&lt;tfoot&gt;</span>
				<span class="htmlTableTag">&lt;tr&gt;</span>
					<span class="htmlTableTag">&lt;td&gt;</span><span class="htmlFormTag">&lt;button class=<span class="htmlAttributeValue">&quot;button&quot;</span> id=<span class="htmlAttributeValue">&quot;buttonUpload&quot;</span> onclick=<span class="htmlAttributeValue">&quot;return ajaxFileUpload();&quot;</span>&gt;</span>Upload<span class="htmlFormTag">&lt;/button&gt;</span><span class="htmlTableTag">&lt;/td&gt;</span>
				<span class="htmlTableTag">&lt;/tr&gt;</span>
			<span class="htmlTableTag">&lt;/tfoot&gt;</span>
	<span class="htmlTableTag">&lt;/table&gt;</span>
		<span class="htmlFormTag">&lt;/form&gt;</span>
		<span class="htmlImageTag">&lt;img id=<span class="htmlAttributeValue">&quot;loading&quot;</span> src=<span class="htmlAttributeValue">&quot;<span class="htmlOtherTag">&lt;?php echo base_url()?&gt;</span></span>asset/images/loading.gif&quot;</span> style=<span class="htmlAttributeValue">&quot;<span class="cssProperty">display</span><span class="cssRest">:</span><span class="cssValue">none</span><span class="cssRest">;</span>&quot;</span>&gt;
		<span class="htmlOtherTag">&lt;div id=<span class="htmlAttributeValue">&quot;info&quot;</span>&gt;</span><span class="htmlOtherTag">&lt;/div&gt;</span>
    <span class="htmlOtherTag">&lt;/div&gt;</span>
	<span class="htmlOtherTag">&lt;/body&gt;</span>
<span class="htmlOtherTag">&lt;/html&gt;</span>
</pre>
<p>Perbedaan yang tampak adalah adanya beberapa file .js dan satu fungsi javascript yang ditambahkan. Sekarang kita buat controller&#8230;</p>
<pre class="php">
<span class="phpKeyword">class </span>Upload<span class="phpKeyword"><span class="phpKeyword"> extends </span></span>Controller <span class="phpOperator">{</span>
 <span class="phpFunctionKeyword">function</span> Upload<span class="phpOperator">(</span><span class="phpOperator">)</span>
 <span class="phpOperator">{</span>
  parent<span class="phpOperator">:</span><span class="phpOperator">:</span>Controller<span class="phpOperator">(</span><span class="phpOperator">)</span><span class="phpText">;</span>
 <span class="phpOperator">}</span>
 <span class="phpFunctionKeyword">function</span> index<span class="phpOperator">(</span><span class="phpOperator">)</span>
 <span class="phpOperator">{</span>
  <span class="phpScriptVar">$this</span><span class="phpOperator">-<span class="phpOperator">&gt;</span></span>load<span class="phpOperator">-<span class="phpOperator">&gt;</span></span>view<span class="phpOperator">(</span><span class="phpString">'upload_form'</span><span class="phpOperator">)</span><span class="phpText">;</span>
 <span class="phpOperator">}</span>
 <span class="phpFunctionKeyword">function</span> do_upload<span class="phpOperator">(</span><span class="phpOperator">)</span>
 <span class="phpOperator">{</span>
   $error <span class="phpOperator">=</span> <span class="phpString">"";
   $msg = ""</span><span class="phpText">;</span>
  $config<span class="phpOperator">[</span><span class="phpString">'upload_path'</span><span class="phpOperator">]</span> <span class="phpOperator">=</span> <span class="phpString">'<span class="phpOperator">.</span>/upload/'</span><span class="phpText">;</span>
  $config<span class="phpOperator">[</span><span class="phpString">'allowed_types'</span><span class="phpOperator">]</span> <span class="phpOperator">=</span> <span class="phpString">'doc<span class="phpOperator">|</span>xls<span class="phpOperator">|</span>ppt<span class="phpOperator">|</span>pdf<span class="phpOperator">|</span>rar<span class="phpOperator">|</span>zip'</span><span class="phpText">;</span>
  $config<span class="phpOperator">[</span><span class="phpString">'max_size'</span><span class="phpOperator">]</span> <span class="phpOperator">=</span> <span class="phpString">'1000'</span><span class="phpText">;</span>   
  <span class="phpScriptVar">$this</span><span class="phpOperator">-<span class="phpOperator">&gt;</span></span>load<span class="phpOperator">-<span class="phpOperator">&gt;</span></span>library<span class="phpOperator">(</span><span class="phpString">'upload'</span>, $config<span class="phpOperator">)</span><span class="phpText">;</span>
  <span class="phpScriptVar">$this</span><span class="phpOperator">-<span class="phpOperator">&gt;</span></span>upload<span class="phpOperator">-<span class="phpOperator">&gt;</span></span>display_errors<span class="phpOperator">(</span><span class="phpString">''</span>,<span class="phpString">''</span><span class="phpOperator">)</span><span class="phpText">;</span>
 <span class="phpKeyword"> if </span><span class="phpOperator">(</span> <span class="phpOperator">!</span> <span class="phpScriptVar">$this</span><span class="phpOperator">-<span class="phpOperator">&gt;</span></span>upload<span class="phpOperator">-<span class="phpOperator">&gt;</span></span>do_upload<span class="phpOperator">(</span><span class="phpString">"fileToUpload"</span><span class="phpOperator">)</span><span class="phpOperator">)</span>
  <span class="phpOperator">{</span>
       $error <span class="phpOperator">=</span> <span class="phpScriptVar">$this</span><span class="phpOperator">-<span class="phpOperator">&gt;</span></span>upload<span class="phpOperator">-<span class="phpOperator">&gt;</span></span>display_errors<span class="phpOperator">(</span><span class="phpOperator">)</span><span class="phpText">;</span>
  <span class="phpOperator">}</span>
 <span class="phpKeyword"> else
</span>
  <span class="phpOperator">{</span>
        $msg <span class="phpOperator">=</span> <span class="phpString">"File berhasil diupload"</span><span class="phpText">;</span>
  <span class="phpOperator">}</span>
  <span class="phpFunction">echo</span> <span class="phpString">"<span class="phpOperator">{</span>"</span><span class="phpText">;</span>
   <span class="phpFunction">echo</span>    <span class="phpString">"error<span class="phpOperator">:</span> <span class="phpString">'" . $error . "'</span>,n"</span><span class="phpText">;</span>
   <span class="phpFunction">echo</span>    <span class="phpString">"msg<span class="phpOperator">:</span> <span class="phpString">'" . $msg . "'</span>n"</span><span class="phpText">;</span>
   <span class="phpFunction">echo</span> <span class="phpString">"<span class="phpOperator">}</span>"</span><span class="phpText">;</span>
 <span class="phpOperator">}</span>
<span class="phpOperator">}</span>
</pre>
<p>Jangan lupa untuk membuat folder &#8220;upload&#8221; dalam direktori yang sama dengan index.php. Terlihat mudah bukan?Silakan dicoba. Anda juga dapat mendownload paket file lengkapnya <a href="http://putraweb.net/download/do_download/616a617846696c6555706c6f61642e726172">disini</a> (pass:putraweb.net) .</p>

<h3>Related posts:</h3><ol><li><a href='http://blog.putraweb.net/2011/01/17/membuat-combobox-dinamis-dengan-ci-dan-ajax/' rel='bookmark' title='Permanent Link: Membuat Combobox Dinamis dengan CI dan Ajax'>Membuat Combobox Dinamis dengan CI dan Ajax</a></li><li><a href='http://blog.putraweb.net/2009/09/27/integrasi-ajax-di-codeigniter/' rel='bookmark' title='Permanent Link: Integrasi Ajax di CodeIgniter'>Integrasi Ajax di CodeIgniter</a></li><li><a href='http://blog.putraweb.net/2009/09/27/fungsi-javascript-sederhana-untuk-mengakses-jquery-di-ci/' rel='bookmark' title='Permanent Link: Fungsi Javascript Sederhana untuk Mengakses Jquery di CI'>Fungsi Javascript Sederhana untuk Mengakses Jquery di CI</a></li><li><a href='http://blog.putraweb.net/2009/09/29/menampilkan-gambar-dari-database-di-codeigniter/' rel='bookmark' title='Permanent Link: Menampilkan Gambar dari Database di CodeIgniter'>Menampilkan Gambar dari Database di CodeIgniter</a></li><li><a href='http://blog.putraweb.net/2009/11/09/referensi-jquery-plugin/' rel='bookmark' title='Permanent Link: Referensi JQuery Plugin'>Referensi JQuery Plugin</a></li></ol> 
				
                    <div class="postTags">Tags: <a href="http://blog.putraweb.net/tag/ajax/" rel="tag">Ajax</a>, <a href="http://blog.putraweb.net/tag/jquery/" rel="tag">JQuery</a>, <a href="http://blog.putraweb.net/tag/tutorial-codeigniter/" rel="tag">tutorial codeigniter</a></div>
							
							<div id="shareLinks">
								<a href="#" class="share">[+] Share &amp; Bookmark</a>
								<span id="icons">
									<a href="http://twitter.com/home/?status=Ajax File Upload (CodeIgniter dan JQuery) : http://blog.putraweb.net/2009/09/27/ajax-file-upload-codeigniter-dan-jquery/" title="Tweet this!">
									<!--<img src="http://blog.putraweb.net/wp-content/themes/boldy/images/twitter.png" alt="Tweet this!" />-->&#8226; Twitter</a>				
									<a href="http://www.stumbleupon.com/submit?url=http://blog.putraweb.net/2009/09/27/ajax-file-upload-codeigniter-dan-jquery/&amp;amp;title=Ajax File Upload (CodeIgniter dan JQuery)" title="StumbleUpon.">
									<!--<img src="http://blog.putraweb.net/wp-content/themes/boldy/images/stumbleupon.png" alt="StumbleUpon" />-->&#8226; StumbleUpon</a>
									<a href="http://digg.com/submit?phase=2&amp;amp;url=http://blog.putraweb.net/2009/09/27/ajax-file-upload-codeigniter-dan-jquery/&amp;amp;title=Ajax File Upload (CodeIgniter dan JQuery)" title="Digg this!">
									<!--<img src="http://blog.putraweb.net/wp-content/themes/boldy/images/digg.png" alt="Digg This!" />-->&#8226; Digg</a>				
									<a href="http://del.icio.us/post?url=http://blog.putraweb.net/2009/09/27/ajax-file-upload-codeigniter-dan-jquery/&amp;amp;title=Ajax File Upload (CodeIgniter dan JQuery)" title="Bookmark on Delicious.">
									<!--<img src="http://blog.putraweb.net/wp-content/themes/boldy/images/delicious.png" alt="Bookmark on Delicious" />-->&#8226; Delicious</a>
									<a href="http://www.facebook.com/sharer.php?u=http://blog.putraweb.net/2009/09/27/ajax-file-upload-codeigniter-dan-jquery/&amp;amp;t=Ajax File Upload (CodeIgniter dan JQuery)" title="Share on Facebook.">
									<!--<img src="http://blog.putraweb.net/wp-content/themes/boldy/images/facebook.png" alt="Share on Facebook" id="sharethis-last" />-->&#8226; Facebook</a>
								</span>
							</div>
		
		
        
<!-- You can start editing here. -->


			<!-- If comments are open, but there are no comments. -->

	 


<div id="respond">

<h2 id="commentsForm">Leave a comment</h2>

<div class="cancel-comment-reply">
	<small><a rel="nofollow" id="cancel-comment-reply-link" href="/2009/09/27/ajax-file-upload-codeigniter-dan-jquery/#respond" style="display:none;">Click here to cancel reply.</a></small>
</div>


<form action="http://blog.putraweb.net/wp-comments-post.php" method="post" id="commentform">


<p><label for="author">Name (required)</label>
<input type="text" name="author" id="author" value="" size="22" tabindex="1" aria-required='true' />
</p>

<p><label for="email">Mail (will not be published) (required)</label>
<input type="text" name="email" id="email" value="" size="22" tabindex="2" aria-required='true' />
</p>

<p><label for="url">Website</label>
<input type="text" name="url" id="url" value="" size="22" tabindex="3" />
</p>


<!--<p><small><strong>XHTML:</strong> You can use these tags: <code>&lt;a href=&quot;&quot; title=&quot;&quot;&gt; &lt;abbr title=&quot;&quot;&gt; &lt;acronym title=&quot;&quot;&gt; &lt;b&gt; &lt;blockquote cite=&quot;&quot;&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=&quot;&quot;&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=&quot;&quot;&gt; &lt;strike&gt; &lt;strong&gt; </code></small></p>-->

<p><label for="comment">Comment</label>
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="POST COMMENT" />
<input type='hidden' name='comment_post_ID' value='68' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p>
<input type="hidden" id="sk2_time" name="sk2_time" value="1321571214" /><input type="hidden" id="sk2_ip" name="sk2_ip" value="223.255.226.147" /><input type="hidden" id="sk2_payload" name="sk2_payload" value="a99d0eed794e5c40290f48138b2f7e92" /><input type="hidden" id="sk2_my_js_check1" name="sk2_my_js_check1" value="ajqa1lujt9" />
<input type="hidden" id="sk2_my_js_check2" name="sk2_my_js_check2" value="fa663196726cd4db2a65d1d3097de19e" />
<script type="text/javascript">
<!--
	document.write('<input type="hidden" id="sk2_my_js_payload" name="sk2_my_js_payload" value="');
	document.write(Math.round ( Math.abs(Math.round ( Math.abs(Math.round ( Math.abs((((((Math.max(Math.round ( Math.abs(1 % 5)), 28) + 11) + 29) + 17) + 27) + 6) % 10)) / 34)))));
	document.write('" />');
-->
</script>

</form>

</div>

			</div>
				
			</div>
		<!-- End #colLeft -->


<!-- Begin #colRight -->
		<div id="colRight">
				<div class="rightBox">
			<h2>Blog Categories </h2>
			<ul >
							</ul>
		</div>
				
		<div class="rightBox"><h2>Recent Comments</h2><ul id="recentcomments"></ul></div>		
		</div>
<!-- End #colRight -->
		
	

 </div>
		   <!-- END CONTENT -->
	</div>
    <!-- END WRAPPER -->
	
	<!-- BEGIN FOOTER -->
	<div id="footer">
			<div style="width:960px; margin: 0 auto; position:relative;">
			<a href="#" id="showHide" style="background-position:0 -16px">Show/Hide Footer Actions</a>
		</div>
		
		<div id="footerActions" style="display:none">
			<div id="footerActionsInner">
			
				<div id="quickContact">
				<p id="success" class="successmsg" style="display:none;">Your email has been sent! Thank you!</p>

				<p id="bademail" class="errormsg" style="display:none;">Please enter your name, a message and a valid email address.</p>
				<p id="badserver" class="errormsg" style="display:none;">Your email failed. Try again later.</p>
					<form action="http://blog.putraweb.net/wp-content/themes/boldy/sendmail.php" method="post" id="quickContactForm">
					<div class="leftSide">
						<input type="text" value="your name" id="quickName" name="name" />
						<input type="text" value="your email" id="quickEmail" name="email" />
						<input type="submit" name="submit" id="submitinput" value="Send"/>
					</div>
					<div class="rightSide">
						<textarea id="quickComment" name="comment">your message
</textarea>
					</div>
					<input type="hidden" id="quickReceiver" name="receiver" value=""/>
					</form>
				</div>
			</div>
		</div>
				<div id="footerWidgets">
			<div id="footerWidgetsInner">
				<!-- BEGIN FOOTER WIDGET -->
				<div class="boxFooter"><h2>Archives</h2>		<ul>
			<li><a href='http://blog.putraweb.net/2011/01/' title='January 2011'>January 2011</a>&nbsp;(2)</li>
	<li><a href='http://blog.putraweb.net/2010/10/' title='October 2010'>October 2010</a>&nbsp;(1)</li>
	<li><a href='http://blog.putraweb.net/2010/03/' title='March 2010'>March 2010</a>&nbsp;(1)</li>
	<li><a href='http://blog.putraweb.net/2009/11/' title='November 2009'>November 2009</a>&nbsp;(4)</li>
	<li><a href='http://blog.putraweb.net/2009/10/' title='October 2009'>October 2009</a>&nbsp;(2)</li>
	<li><a href='http://blog.putraweb.net/2009/09/' title='September 2009'>September 2009</a>&nbsp;(18)</li>
		</ul>
</div><div class="boxFooter"><h2>Meta</h2>			<ul>
						<li><a href="http://blog.putraweb.net/wp-login.php">Log in</a></li>
			<li><a href="http://blog.putraweb.net/feed/" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
			<li><a href="http://blog.putraweb.net/comments/feed/" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
			<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li>
						</ul>
</div>				<!-- END FOOTER WIDGETS -->
				<!-- BEGIN COPYRIGHT -->
				<div id="copyright">
					© Anggy Trisnawan Putra, All Rights Reserved 
						<div id="site5bottom"><a href="http://www.site5.com/resellers/web/">Design by site5.com</a></div>
				</div>
				<!-- END COPYRIGHT -->						
				</div>
				
		</div>
	</div>	
	<!-- END FOOTER -->
</div>
<!-- END MAINWRAPPER -->
</body>
</html>


